<template>
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view class="notice">站点图书列表</view>
        <view class="good-list">
            <view :id="'book'+book.id" class="good-li" v-for="book in bookList" :key="book.id">
                <image class="good-img" :src="book.headPicWeb" mode="widthFix" />
                <view class="flex-item">
                    <uni-row style="margin-bottom: 10px;" :gutter="20">
                    	<uni-col :span="16">书名:{{book.name}}</uni-col>
                    	<uni-col :span="8">借阅次数:{{book.borrowNum}}</uni-col>
                    </uni-row>
                    <uni-row style="margin-bottom: 10px;" :gutter="20">
                        <uni-col :span="18">图书编号:{{book.code}}</uni-col>
                        <uni-col :span="6"><button class="mini-btn" type="primary" size="mini" @click="borrowBook(book.id)">借阅</button></uni-col>
                    </uni-row>
                    <uni-row style="margin-bottom: 10px;" :gutter="20">
                        <uni-col :span="24"><text style="color: red;">借阅时请核对图书编号</text></uni-col>
                    </uni-row>
                    <uni-row style="margin-bottom: 10px;" :gutter="20">
                        <uni-collapse accordion>
                            <uni-collapse-item title="更多内容介绍">
                                <text space="emsp" decode="true">{{book.context}}</text>
                            </uni-collapse-item>
                        </uni-collapse>
                    </uni-row>
                </view>
            </view>
        </view>
    </mescroll-body>
</template>


<script>
    import api from '@/common/vmeitime-http/'
    import {
        BASE_API
    } from '@/common/config.js'
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin],
        onLoad(options) {
            this.siteId = options.siteId
        },
        data() {
            return {
                emptyText: '&ensp;',
                siteId: '',
                bookList: [],
                pageNum: 1,
            }
        },

        methods: {
            borrowBook(bookId){
                api.borrowBook(bookId).then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '借阅成功',
                            //将值设置为 success 或者直接不用写icon这个参数
                            icon: 'success',
                            //显示持续时间为 2秒
                            duration: 1000
                        })
                        let siteId = this.siteId
                        setTimeout(function() {
                        	uni.redirectTo({
                        	    url: '../library/bookList?siteId='+siteId
                        	})}, 1000);
                    }else{
                        uni.showToast({
                            title: res.data.msg,
                            //将值设置为 success 或者直接不用写icon这个参数
                            icon: 'error',
                            //显示持续时间为 2秒
                            duration: 1000
                        })
                    }
                }).catch((err) => {
                    console.log('request fail', err);
                })
            },
            upCallback(page) {
                var data = {
                    siteId: this.siteId,
                    pageNum: page.num,
                }
                api.bookList(data).then((res) => {
                    if (res.data.code === 200) {
                        if (page.num == 1) {
                            this.bookList = []
                        }
                        for (var i = 0; i < res.data.rows.length; i++) {
                            var book = res.data.rows[i]
                            book.headPicWeb = BASE_API + book.headPic
                            this.bookList.push(book)
                        }

                        this.mescroll.endBySize(res.data.rows.length, res.data.total)
                    }
                }).catch((err) => {
                    console.log('request fail', err);
                    this.mescroll.endErr();
                })
            }
        }
    }
</script>

<style>
    .notice {
        font-size: 50upx;
        padding: 40upx 0;
        border-bottom: 1upx solid #eee;
        text-align: center;
        color: #555;
    }

    .good-list {
        background-color: #fff;
    }

    .good-li {
        display: flex;
        align-items: center;
        padding: 20upx;
        border-bottom: 1upx solid #eee;
    }

    .good-img {
        width: 160upx;
        height: 160upx;
        margin-right: 20rpx;
    }

    .flex-item {
        flex: 1;
    }

    .good-name {
        font-size: 26upx;
        line-height: 40upx;
        height: 80upx;
        margin-bottom: 20upx;
        overflow: hidden;
    }

    .good-price {
        font-size: 26upx;
        color: red;
    }

    .good-sold {
        font-size: 24upx;
        margin-left: 16upx;
        color: gray;
    }
</style>